/** * Create by mzq * Description: My3DBar * Date: 2024/9/12 13:35 * Update: 2024/9/12 13:35 */

<template>
  <div id="bar" class="bar"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { formatDate, formatDate2 } from '@/utils/index.js'

const props = defineProps({
  reqData: {
    type: Object
  }
})

const dateArr = ref([])

const init = () => {
  let myChart = echarts.init(document.getElementById('bar'))
  const offsetX = 10 //bar宽
  const offsetY = 5 //倾斜角度
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint
      const c0 = [shape.x, shape.y] // 左侧面 右上点
      const c1 = [shape.x - offsetX, shape.y - offsetY + 5] // 左侧面  左上点
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5] // 左侧面 左下点
      const c3 = [xAxisPoint[0], xAxisPoint[1] + 5] // 左侧面 右下点
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath()
    }
  })
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint
      const c1 = [shape.x, shape.y] //右侧面左上点
      const c2 = [xAxisPoint[0], xAxisPoint[1] + 5] //右侧面 左下点
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5] //右侧面  右下点
      const c4 = [shape.x + offsetX, shape.y - offsetY + 5] //右侧面 右上点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath()
    }
  })
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y + 5] //顶部菱形下点
      const c2 = [shape.x + offsetX, shape.y - offsetY + 5] //顶部菱形右点
      const c3 = [shape.x, shape.y - offsetX + 5] //顶部菱形上点
      const c4 = [shape.x - offsetX, shape.y - offsetY + 5] //顶部菱形左点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath()
    }
  })
  // 注册三个面图形
  echarts.graphic.registerShape('CubeLeft', CubeLeft)
  echarts.graphic.registerShape('CubeRight', CubeRight)
  echarts.graphic.registerShape('CubeTop', CubeTop)
  let xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  let seriesData = dateArr.value
  // 绿色渐变
  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
  // 蓝色渐变
  let colorArr = [
    ['#71ddff'],
    ['rgba(12, 149, 198, 1)', 'rgba(13,8,16,0)'],
    ['rgba(34, 188, 255, 1)', 'rgba(14,156,185,0)']
  ]
  let option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params, ticket, callback) {
        const item = params[1]
        return item.name + ' : ' + item.value
      }
    },
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255, 255, 255, 0.60)'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 10,
        interval: 0,
        rotate: 45,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        formatter: function (value) {
          const length = value.length
          if (length > 3) {
            const start = Math.floor(length / 2)
            const str = value.slice(0, start) + '\n' + value.slice(start, length)
            return str
          }
          return value
        }
      }
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.16)'
        }
      },
      // y轴刻度线
      axisTick: {
        show: false
      },
      // y轴文字
      axisLabel: {
        show: false,
        fontSize: 14,
        color: 'rgba(255, 255, 255, 0.60)'
      }
    },
    series: [
      {
        type: 'custom',
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: 'group',
            children: [
              // 左侧面
              {
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[1][0]
                    },
                    {
                      offset: 1,
                      color: colorArr[1][1]
                    }
                  ])
                }
              },
              // 右侧面
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[2][0]
                    },
                    {
                      offset: 1,
                      color: colorArr[2][1]
                    }
                  ])
                }
              },
              // 顶部
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[0][0]
                    },
                    {
                      offset: 1,
                      color: colorArr[0][0]
                    }
                  ])
                }
              }
            ]
          }
        },
        data: seriesData
      },
      {
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: (e) => {
              return e.value
            },
            fontSize: 16,
            color: '#43C4F1',
            offset: [0, -5]
          }
        },
        itemStyle: {
          color: 'transparent'
        },
        tooltip: {},
        data: seriesData
      }
    ]
  }

  myChart.setOption(option, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.reqData,
  (val) => {

    const days = 7; // 近7天
    const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期

    const dateList = Array.from({ length: days }, (v, i) => i).map(day => {
      const date = new Date();
      date.setDate(date.getDate() - day);
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' 星期' + week[date.getDay()];
    });





    // 组装数据
    let arr = []
    for (let i = 0; i < dateList.length; i++) {
      let obj = {}
      if (dateList[i].indexOf("星期一") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期二") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期三") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期四") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期五") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期六") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
      if (dateList[i].indexOf("星期日") !== -1){
        let split = dateList[i].split(' ')
        obj.day = split[0]
        obj.week = split[1]
        arr.push(obj)
      }
    }

    for (let i = 0; i < arr.length; i++) {
      arr[i].newDay = formatDate2(arr[i].day)
    }


    for (let i = 0; i < arr.length; i++) {
      for (let monthCntKey in val.monthCnt) {
        if (arr[i].newDay === monthCntKey){
          arr[i].value = val.monthCnt[monthCntKey]
        }
      }
    }

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].week === '星期一'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期二'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期三'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期四'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期五'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期六'){
        dateArr.value.push(arr[i].value)
      }
      if (arr[i].week === '星期日'){
        dateArr.value.push(arr[i].value)
      }
    }

    init()
  }
)

</script>
<style scoped lang="scss">
#bar {
  width: 1.0729rem /* 206/192 */;
  height: 0.8333rem /* 160/192 */;
}
</style>
